<template>
    <div class="container">
        <el-table :data="tableData" style="width: 100%" height="100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="visitorIp" label="ip" width="110" />
            <el-table-column prop="visitorLocation" label="归属地" width="200" />
            <el-table-column prop="userAgent" label="设备" width="120" />
            <el-table-column prop="firstAccessTime" label="第一次访问时间" width="220" />
            <el-table-column prop="lastAccessTime" label="上一次访问时间" width="400" />
            <!-- <el-table-column label="删除" /> -->
        </el-table>
        <span style="padding-bottom: 4rem; padding-top: 1rem" @click="deleteVisitor()">
            <el-button type="danger" icon="Delete" circle />
        </span>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import { instance } from '../../axios';
import { ElMessage } from 'element-plus'
import Cookies from 'js-cookie';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter()
onMounted(() => {
    if (Cookies.get('cookie-jwt') == null) {
        router.push('/login')
    }
})

let tableData = ref([])

instance.get('/visitor/findAllVisitor').then(
    success => {
        if (success.data.code == 300) {
            router.push('/login')
        }
        if (success.data.code == 200) {

            // success.data.data.data.forEach(item=>{
            //     item.firstAccessTime=moment(item.firstAccessTime).toDate(); 
            //     item.lastAccessTime=moment(item.firstAccessTime).toDate(); 
            // })
            tableData.value = success.data.data.data
        }

    }
).catch(error => {
    console.log("visitor组件发送请求出现错误");
    console.log(error);
})

let deleteIds = []
function handleSelectionChange(selection) {
    // selection 参数包含了所有选中行的数据
    // this.selectedRows = selection;
    deleteIds = []
    selection.forEach(element => {
        deleteIds.push(element.id)
    });
    // console.log(deleteIds);//拿到这个id数组
    // console.log(selection); // 打印选中的行数据

}

let strPath = ''

function deleteVisitor() {

    if (deleteIds.length == 0) {
        console.log("选中为空未删除");
    } else {
        // console.log("点击了删除");
        // console.log(deleteIds);
        //ids=1&ids=3
        strPath = ''
        deleteIds.forEach(item => {
            strPath = strPath + "ids=" + item + "&"
        })
        strPath = strPath.substring(0, strPath.length - 1)

        //发送请求删除
        instance.delete(`/visitor/deleteByIds?${strPath}`).then(success => {

            ElMessage.success('删除成功')
            //删除成功之后重新发送请求
            instance.get('/visitor/findAllVisitor').then(
                success => {
                    tableData.value = success.data.data.data
                    // console.log(tableData);
                }
            ).catch(error => {
                console.log("visitor组件发送请求出现错误");
                console.log(error);
            })


        }).catch(error => {

            ElMessage.error('网络错误 删除失败')


        })


    }
}
</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 4%;
}
</style>